import React from 'react';
import {Link} from 'dva/router';
import {Flex, Icon, Card, WingBlank, WhiteSpace, Carousel, Toast, Modal, Button} from 'antd-mobile';
import Layout from '../../components/layout/layout';
import './index.less';

class Index extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: ['1', '2', '3'],
      imgHeight: 176,
    }
  }

  componentDidMount() {
    console.log("小米分首页")
  }

  render() {
    const {history} = this.props;
    return (
      <Layout
        history={history}
        className={'page-index'}>
        <Carousel
          autoplay={false}
          className={'banner'}
          dotStyle={{borderRadius: "0", width: "20px", height: "4px", background: "#ccc"}}
          dotActiveStyle={{borderRadius: "0", width: "20px", height: "4px", background: "#FD6A1E"}}>

          <div className={'s-item'}>
            <div className={'s-inner'}>
              <div className={'s-title'}>
                最高额度(元)
              </div>
              <div className={'s-money'}>
                50000.00
              </div>
              <Flex align={'center'} justify={'between'} className={'s-intro'}>
                <Flex.Item className={'s-intro-item'}>
                  急速审批
                </Flex.Item>
                <Flex.Item className={'s-intro-item'}>
                  低频费率
                </Flex.Item>
                <Flex.Item className={'s-intro-item'}>
                  还款轻松
                </Flex.Item>
              </Flex>
            </div>
          </div>
        </Carousel>


        {/* 主题信息 */}
        <div className={'section'}>
          <div className={'s-header'}>- 产品介绍 -</div>
          <Flex wrap="wrap" className={'s-body'}>
            <div className={'w-item w-border w-border-bottom  w-border-right'}>
              <img src={require('./imgs/i-1.png')}/>
              <h4>借款额度</h4>
              <p>最高可达5万</p>
            </div>
            <div className={'w-item w-border w-border-bottom'}>
              <img src={require('./imgs/i-2.png')}/>
              <h4>借款额度</h4>
              <p>最高可达5万</p>
            </div>
            <div style={{}} className={'w-item w-border w-border-top'}>
              <img src={require('./imgs/i-3.png')}/>
              <h4>借款额度</h4>
              <p>最高可达5万</p>
            </div>
            <div className={'w-item'}>
              <img src={require('./imgs/i-4.png')}/>
              <h4>借款额度</h4>
              <p>最高可达5万</p>
            </div>
          </Flex>
        </div>
        {/*按钮*/}
        <div
          onClick={() => {
            history.push('/assess')
          }}
          className='btn'>查看额度
        </div>
      </Layout>
    );
  }
}

Index.propTypes = {};

export default Index;
